

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>The main user interface &mdash; Sigil v0.4.1 documentation</title>
    <link rel="stylesheet" href="_static/custom.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '',
        VERSION:     '0.4.1',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="_static/jquery.js"></script>
    <script type="text/javascript" src="_static/underscore.js"></script>
    <script type="text/javascript" src="_static/doctools.js"></script>
    <link rel="shortcut icon" href="_static/app_16.ico"/>
    <link rel="top" title="Sigil v0.4.1 documentation" href="index.html" />
    <link rel="next" title="Find &amp; Replace" href="searching.html" />
    <link rel="prev" title="Introduction" href="intro.html" />
 
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-6767398-2']);
  _gaq.push(['_trackPageview']);
</script>

  </head>
  <body>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             accesskey="I">index</a></li>
        <li class="right" >
          <a href="searching.html" title="Find &amp; Replace"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="intro.html" title="Introduction"
             accesskey="P">previous</a> |</li>
        <li><a href="contents.html">Sigil v0.4.1 documentation</a> &raquo;</li> 
      </ul>
    </div>
      <div class="sphinxsidebar">
        <div class="sphinxsidebarwrapper">
            <p class="logo"><a href="contents.html">
              <img class="logo" src="_static/small_logo.png" alt="Logo"/>
            </a></p>
  <h3><a href="contents.html">Table Of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">The main user interface</a><ul>
<li><a class="reference internal" href="#what-are-all-these-files">What are all these files?</a></li>
<li><a class="reference internal" href="#the-views">The Views</a><ul>
<li><a class="reference internal" href="#book-view">Book View</a></li>
<li><a class="reference internal" href="#code-view">Code View</a></li>
<li><a class="reference internal" href="#split-view">Split View</a></li>
</ul>
</li>
</ul>
</li>
</ul>

  <h4>Previous topic</h4>
  <p class="topless"><a href="intro.html"
                        title="previous chapter">Introduction</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="searching.html"
                        title="next chapter">Find &amp; Replace</a></p>
  <h3>This Page</h3>
  <ul class="this-page-menu">
    <li><a href="_sources/main_ui.txt"
           rel="nofollow">Show Source</a></li>
  </ul>
<div id="searchbox" style="display: none">
  <h3>Quick search</h3>
    <form class="search" action="search.html" method="get">
      <input type="text" name="q" size="18" />
      <input type="submit" value="Go" />
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
    <p class="searchtip" style="font-size: 90%">
    Enter search terms or a module, class or function name.
    </p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">
            
  <div class="section" id="the-main-user-interface">
<span id="main-ui"></span><h1>The main user interface<a class="headerlink" href="#the-main-user-interface" title="Permalink to this headline">¶</a></h1>
<p>Sigil provides an advanced editing environment for <abbr>EPUB</abbr> books. The main user interface (UI) is built around a tabbed central editing view-space and a <a class="reference internal" href="book_browser.html#book-browser"><em>Book Browser</em></a> to the left. You double-click files in the Book Browser with your mouse, and an editing (or display) tab is added to the main pane. These tabs can then be closed, reordered or opened again.</p>
<p><a class="reference internal" href="#fig-mainui"><em>Main user interface</em></a> presents a typical example of the UI at work.</p>
<div class="figure" id="fig-mainui">
<a class="reference internal image-reference" href="_images/book_view.png"><img alt="_images/book_view.png" src="_images/book_view.png" style="height: 647.2px;" /></a>
<p class="caption">Main user interface</p>
</div>
<div class="section" id="what-are-all-these-files">
<h2>What are all these files?<a class="headerlink" href="#what-are-all-these-files" title="Permalink to this headline">¶</a></h2>
<p>You may be wondering what are all these files in the Book Browser. Why isn&#8217;t the book displayed as a set of pages? Well for that you first need to understand how the <abbr>EPUB</abbr> format works. A more in-depth description can be found in the <a class="reference internal" href="epub_overview.html#epub-overview"><em>EPUB Overview</em></a> section, but what follows is a short summation (but do read that section too).</p>
<p>An <abbr>EPUB</abbr> file is just a container for various resources that go into an <abbr>EPUB</abbr> book. The text of the book is in <abbr>XHTML</abbr> files and usually, content producers use one <abbr>XHTML</abbr> file for one chapter of the book. You can also commonly find several <abbr>CSS</abbr> styling files, images and fonts files. Now, along with all these resources come several other special files that describe the Table of Contents, the book&#8217;s <a class="reference internal" href="glossary.html#term-metadata"><em class="xref std std-term">metadata</em></a>, the reading order of the <abbr>XHTML</abbr> files, list all the resources present in the container and more.</p>
<p>A <a class="reference internal" href="glossary.html#term-reading-system"><em class="xref std std-term">Reading System</em></a> (<abbr>RS</abbr>) takes an <abbr>EPUB</abbr> file and then displays to the user the first <abbr>XHTML</abbr> file in the specified reading order. It doesn&#8217;t present it like a web browser would—as one large page with a scrollbar—but &#8220;paginates&#8221; the content into pages the size of the user&#8217;s screen. When the user reaches the end of the <abbr>XHTML</abbr> file, the next page will be the start of the succeeding <abbr>XHTML</abbr> file in the reading order.</p>
<p>What the <abbr>RS</abbr> provides is merely a paged rendition of those resources. <em>Every</em> <abbr>RS</abbr> will provide a slightly different rendition that adapts to the screen size and technical limitations of the device it&#8217;s running on; that&#8217;s the whole point of <abbr>EPUB</abbr>.</p>
<p>Now, that is how an <abbr>RS</abbr> works—everything is displayed in pages. But this is not the ideal way to work with a book when you&#8217;re creating it. Books can well go into thousands of pages.</p>
<p>So Sigil presents a file-focused editing environment. You can open every <abbr>XHTML</abbr> file and edit it in a <abbr>WYSIWYG</abbr> manner in the <a class="reference internal" href="#book-view"><em>Book View</em></a>, or edit the code directly in the <a class="reference internal" href="#code-view"><em>Code View</em></a>. You can edit the <abbr>CSS</abbr>, <abbr>XPGT</abbr> and other files, and view the images one by one.</p>
<p>To add and edit that special information like the Table of Contents and the metadata, Sigil presents you with purpose-built editors. You can access them through the <em class="guilabel">Tools</em> menu. Everything you enter in them is saved and exported when the resource files are bundled together and the <abbr>EPUB</abbr> book is built. When you open the resulting <abbr>EPUB</abbr> file in some <abbr>RS</abbr>, it will be displayed as a paged book.</p>
</div>
<div class="section" id="the-views">
<h2>The Views<a class="headerlink" href="#the-views" title="Permalink to this headline">¶</a></h2>
<div class="section" id="book-view">
<span id="id1"></span><h3>Book View<a class="headerlink" href="#book-view" title="Permalink to this headline">¶</a></h3>
<p>The Book View displays the <abbr>XHTML</abbr> files &#8220;rendered&#8221;, that is as they would look like in a <em>Reading System</em> when presented to the user.</p>
<p>Most of the <abbr>WYSIWYG</abbr> buttons and actions only work in this view. The <em class="guilabel">Headings</em> combo-box for instance changes the selected paragraph into a heading from which a Table of Contents can be built (see the <a class="reference internal" href="toc_editor.html#toc-editor"><em>Table of Contents Editor</em></a> section). You can also insert images, chapter breaks and apply all the standard formatting operations like bold, italic, paragraph alignment and more.</p>
<p>This view is only available for <abbr>XHTML</abbr> files.</p>
</div>
<div class="section" id="code-view">
<span id="id2"></span><h3>Code View<a class="headerlink" href="#code-view" title="Permalink to this headline">¶</a></h3>
<p>The Code View provides a way to edit the underlying code of <abbr>XHTML</abbr>, <abbr>CSS</abbr> and <abbr>XPGT</abbr> files while displaying it with advanced syntax highlighting. Line numbers are displayed in a gutter on the left side of the pane.</p>
<p>An example of what an <abbr>XHTML</abbr> file looks like in this view can bee seen in the <a class="reference internal" href="#fig-codeview"><em>Code View</em></a>.</p>
<div class="figure" id="fig-codeview">
<a class="reference internal image-reference" href="_images/code_view.png"><img alt="_images/code_view.png" src="_images/code_view.png" style="height: 647.2px;" /></a>
<p class="caption">Code View</p>
</div>
</div>
<div class="section" id="split-view">
<h3>Split View<a class="headerlink" href="#split-view" title="Permalink to this headline">¶</a></h3>
<p>The Split View is a sort of combination between the previous two views: content is shown rendered in the top half, and the corresponding code is shown in the bottom half. Switching between one half to the other synchronizes their positions. The dividing bar between the bars can be dragged and adjusted with the mouse.</p>
<p>This view is also only available for <abbr>XHTML</abbr> files. An example is shown in the <a class="reference internal" href="#fig-splitview"><em>Split View</em></a>.</p>
<div class="figure" id="fig-splitview">
<a class="reference internal image-reference" href="_images/split_view.png"><img alt="_images/split_view.png" src="_images/split_view.png" style="height: 647.2px;" /></a>
<p class="caption">Split View</p>
</div>
</div>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             >index</a></li>
        <li class="right" >
          <a href="searching.html" title="Find &amp; Replace"
             >next</a> |</li>
        <li class="right" >
          <a href="intro.html" title="Introduction"
             >previous</a> |</li>
        <li><a href="contents.html">Sigil v0.4.1 documentation</a> &raquo;</li> 
      </ul>
    </div>

    <div class="footer">
        &copy; Copyright 2009-2011, Strahinja Marković.
      Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
    </div>
<script type="text/javascript">
  (function() {
    var ga = document.createElement('script');
    ga.src = ('https:' == document.location.protocol ?
              'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    ga.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(ga);
  })();
</script>

  </body>
</html>